<template>
    <view class="bottom">
        <Header></Header>
        <view>
            <view class="back">
                <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                        name="arrow-left" color="#00eaff" @click="back"></u-icon>
                <text style="color: #00eaff;padding-right: 30rpx">Pickup Record</text>
            </view>
            <view>
                <u-tabs :list="list" @change="change" :current="current" :is-scroll="false"
                        bg-color="#0f0e2d" inactive-color="#4e5278" active-color="#00eaff"
                        :active-item-style="{color: '#00eaff', fontSize: '28rpx'}">
                </u-tabs>
            </view>
            <view v-if="current===0">
                <view v-for="(item,index) in deliveryList" :key="index">
                    <view class="item">
                        <u-row :gutter="20">
                            <u-col span="4">
                                <view class="item-name">{{ item.goods_name }}</view>
                            </u-col>
                            <u-col span="3">
                                <view class="item-image">
                                    <u-image width="120rpx" height="90rpx" :src="item.goods_image"></u-image>
                                </view>
                            </u-col>
                            <u-col span="3">
                                <view>{{ item.time }}</view>
                            </u-col>
                            <u-col span="2">
                                <view>{{ item.status }}</view>
                            </u-col>
                        </u-row>


                    </view>
                </view>
            </view>
        </view>
        <view v-if="noMore">
            <u-divider style="padding: 30rpx" bg-color="#0f0e2d">There's no more data left</u-divider>
        </view>
        <u-toast ref="uToast"/>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";

export default {
    name: "pickupRecord",
    components: {
        CustomTabbar,
        Header
    },
    data() {
        return {
            list: [{
                name: 'Retrieving'

            }, {
                name: 'Retrieved'
            }],
            current: 0,
            // 背包
            deliveryList: [],
            total: 0,
            current_page: 1,
            last_page: 0,
            // 到底
            noMore: false,
        };
    },
    onShow() {
        this.myOrderList();
    },
    // 触底加载更多
    onReachBottom() {
        this.current_page++
        this.$u.api.myOrderList({
            page: this.current_page,
            pagesize: this.pagesize,
            status: this.current + 1
        }).then(res => {
            // 没数据
            if (res.data.data.length === 0) {
                this.noMore = true;
                return
            }
            this.noMore = false;
            this.deliveryList = this.deliveryList.concat(res.data.data)
            this.total = res.data.total
            this.current_page = res.data.current_page
            this.last_page = res.data.last_page
        })
    },
    methods: {
        // 返回
        back() {
            this.$u.route({
                type: 'navigateBack',
                delta: 1
            })
        },
        // 切换
        change(index) {
            this.current = index;
            this.myOrderList()
        },
        // 获取发货记录
        myOrderList() {
            this.current_page = 1
            this.$u.api.myOrderList({
                page: this.current_page,
                status: this.current + 1
            }).then(res => {
                if (res.code === 1) {
                    // console.log(res);
                    // 没数据
                    if (res.data.data.length === 0) {
                        this.noMore = true;
                        this.deliveryList = [];
                        return
                    }
                    this.deliveryList = res.data.data;
                    this.total = res.data.total;
                    this.current_page = res.data.current_page;
                    this.pagesize = res.data.per_page;
                    this.last_page = res.data.last_page;
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.back {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}

.item {
    background-image: linear-gradient(-20deg, #616161, #9bc5c3 100%);
    margin: 20rpx;
    border-radius: 20rpx;

    .item-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 10rpx;
    }

    .item-image {
        padding-top: 20rpx;
        margin: 0 auto;
    }
}
</style>
